let ctx = document.querySelector("#clock").getContext('2d');

function $(name){
	return document.querySelectorAll(name);
}

function angleToRadian(angle){
	return angle / 180 * Math.PI;
}

//获取canvas的宽和高
let width = ctx.canvas.width;
let height = ctx.canvas.height;

//半径
let r = width / 2;

//比例
var rem = width/200;

//背景图
var img = new Image();   // 创建img元素
	img.src = 'Itachi.jpg';

//画圆
function drawBackground(){
	//定义画布中心为（0，0）
	ctx.translate(r, r);
	
	//画背景图片
	ctx.save();
	ctx.globalAlpha=0.6;
	//ctx.drawImage(img,-75,-75,150,150);
	circleImg(ctx, img, -90*rem, -90*rem, 90*rem);
	ctx.restore();
	
	ctx.beginPath();
	ctx.lineWidth = 10*rem;
	ctx.arc(0, 0, r-ctx.lineWidth/2, 0, 2*Math.PI, false);
	ctx.stroke();
	
	//画小时数
	var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
	ctx.font =18*rem+'px Arial';
	ctx.textAlign = 'center';
	ctx.textBaseline = 'middle';
	hourNumbers.forEach(function(number, i){
		var rad = 2*Math.PI / 12 * i;
		var x = Math.cos(rad) * (r - 30*rem);
		var y = Math.sin(rad) * (r - 30*rem);
		ctx.fillText(number, x, y);
	})
	
	//画秒对应的点
	for(var i = 0; i<60;i++){
		var rad = 2*Math.PI/60 *i;
		var x = Math.cos(rad) * (r - 18*rem);
		var y = Math.sin(rad) * (r - 18*rem);
		ctx.beginPath();
		if(i%5 == 0){
			ctx.fillStyle = '#000';
		}else {
			ctx.fillStyle = '#ccc';
		}
		ctx.arc(x, y, 2*rem, 0, 2*Math.PI, false);
		ctx.fill();
	}
	
	
  	
  	function circleImg(ctx, img, x, y, r) {
	    ctx.save();
	    var d =2 * r;
	    var cx = x + r;
	    var cy = y + r;
	    ctx.arc(cx, cy, r, 0, 2 * Math.PI);
	    ctx.clip();
	    ctx.drawImage(img, x, y, d, d);
	    ctx.restore();
  	}

}

//画时针
function drawHour(hour,minute){
	ctx.save();
	ctx.beginPath();
	var rad = 2*Math.PI/12*hour;
	var mrad = 2*Math.PI/12/60*minute;
	ctx.rotate(rad + mrad);
	ctx.lineWidth = 6*rem;
	ctx.lineCap = 'round';
	ctx.moveTo(0, 10*rem);
	ctx.lineTo(0, -r/2);
	ctx.stroke();
	ctx.restore();
}

//画分针
function drawMinute(minute){
	ctx.save();
	ctx.beginPath();
	var rad = 2*Math.PI/60*minute;
	ctx.rotate(rad);
	ctx.lineWidth = 3*rem;
	ctx.lineCap = 'round';
	ctx.moveTo(0, 10*rem);
	ctx.lineTo(0, -r + 30*rem);
	ctx.stroke();
	ctx.restore();
}

//画秒针
function drawSecond(second){
	ctx.save();
	ctx.beginPath();

	ctx.fillStyle = 'mediumblue';
	
	//设置阴影
    ctx.shadoeOffsetX=7;
    ctx.shadoeOffsetY=7;
    ctx.shadowBlur=5;
    ctx.shadowColor="rgba(0,0,255,0.9)";
    
	var rad = 2*Math.PI/60*second;
	ctx.rotate(rad);
	ctx.moveTo(-2, 20*rem);
	ctx.lineTo(2, 20*rem);
	ctx.lineTo(1, -r+18*rem);
	ctx.lineTo(-1, -r+18*rem);
	ctx.fill();
	ctx.restore();
}

//画原点
function drawDot(){
	ctx.beginPath();
	ctx.fillStyle = 'silver';
	ctx.arc(0, 0, 3*rem, 0, 2*Math.PI, false);
	ctx.fill();
}




function draw(){
	ctx.save();
	ctx.clearRect(0, 0, width, height);
 	var now = new Date();
 	var hour = now.getHours();
 	var minute = now.getMinutes();
 	var second = now.getSeconds();
 	drawBackground();
	drawHour(hour,minute);
	drawMinute(minute);
	drawSecond(second);
	drawDot();
	ctx.restore();
}

draw();
//每一秒画一次
setInterval(draw, 1000);


//var body = document.querySelector("body");
//var height, width;
//
//function resize(){
//	height = body.clientHeight;
//	width = body.clientWidth;
//	canvas.height = height;
//	canvas.width = width;
//}
//resize();
//window.onresize = resize;
